<template>
  <section>
	  <main>
	  	<div class="pink"><span>新增记录</span></div>
	  	<div class="model">
	  		<div class="kong"></div>
	  		<div class="header">
	  		  <span class="title">基本信息</span>
	  		</div>
	  		<div class="body">
	  			<el-form ref="form" :model="form" label-width="80px">
	  				<el-col :span="13">
		  			  <el-form-item label="课程名称">
		  			    <el-autocomplete
                  class="inline-input"
                  v-model="form.name"
                  :fetch-suggestions="querySearch"
                  @select="keyInput">
                </el-autocomplete>
		  			  </el-form-item>
	  			  </el-col>
	  			  <el-col :span="12">
		  			  <el-form-item label="授课对象">
		  			    <el-input v-model="form.competitionName"></el-input>
		  			  </el-form-item>
	  			  </el-col>
	  			  <el-col :span="12">
		  			  <el-form-item label="巡查人">
		  			    <el-input v-model="form.worksName"></el-input>
		  			  </el-form-item>
	  			  </el-col>
	  			  <el-col :span="24">
		  			  <el-form-item label="课程详情">
                <textarea class="textarea" cols="50" rows="8"></textarea>
		  			  </el-form-item>
	  			  </el-col>
	  			  <el-col :span="24">
              <el-upload
                class="upload-demo"
                ref="upload"
                action=""
                :auto-upload='false'
                :headers= "this.xtoken"
                list-type="picture-card"
                :on-success="successPreview">
                <i class="el-icon-plus"></i>
              </el-upload>
              <span class="tooltip">提示:第一张照片将设置为封面</span>
	  			  </el-col>
            <div class="clear"></div>
	  			</el-form>
	  		</div>
        
        <el-button @click="addClass"><i class="el-icon-plus"></i></el-button>
        <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
          <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
            <div class="content">
              <div class="line">
                <div class="left">
                  <span>上课教师</span>
                  <input type="text" class="inputText" v-model="item.teacher">
                </div>
                <div class="right">
                  <span>上课时间</span>
                  <input type="text" class="inputText" v-model="item.time">
                </div>
                <div class="clear"></div>
              </div>
              <div class="line">
                <span>上课人数</span>
                <input type="text" class="inputText" v-model="item.people">
              </div>
              <div class="line">
                <div class="left">
                  <span>上课地点</span>
                  <input type="text" class="inputText" v-model="item.Qplace">
                </div>
                <div class="right">
                  <span>雨天地点</span>
                  <input type="text" class="inputText" v-model="item.Yplace">
                </div>
                <div class="clear"></div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
        <!-- <el-col :span="24"> -->
          <div class="bottom">
            <el-button type="danger" @click="keepData">提交</el-button>
          </div>
        <!-- </el-col> -->
	  	</div>
	  </main>	
  </section>
</template>

<script>
export default {
  data () {
    return {
      xtoken: null,
      gradeSelect: null,
      gradeOption: [],
      classSelect: null,
      classOption: [],
      RankSelect: null,
      RankOption: [],
      LevelSelect: null,
      LevelOption: [],
      restaurants: [],
      dialogImageUrl: null,
      dialogVisible: false,
      value2: null,
      options2: [],
      editableTabsValue: '1',
      form: {
        id: null,
        name: null,
        competitionName: null,
        worksName: null,
        awardDate: null,
        awardCompany: null,
        guideTeacher: null,
        attach: []
      },
      editableTabs: [{
        title: '1班',
        name: '1',
        teacher: null,
        time: null,
        people: null,
        Qplace: null,
        Yplace: null
      },
      {
        title: '2班',
        name: '2',
        teacher: null,
        time: null,
        people: null,
        Qplace: null,
        Yplace: null
      }]
    }
  },
  mounted () {
    this.getGradeData()
    this.getRankData()
    this.getLevelData()
    // let _cookie = document.cookie.split(';')
    // let _cookieArray = []
    // _cookie.forEach(v => {
    //   let _d = v.split('=')
    //   _cookieArray.push({
    //     key: _d[0],
    //     value: _d[1]
    //   })
    // })
  },
  methods: {
    addClass () {
      this.editableTabs.push({
        title: this.editableTabs.length + 1 + '班',
        name: this.editableTabs.length + '1',
        teacher: null,
        time: null,
        people: null,
        Qplace: null,
        Yplace: null
      })
    },
    querySearch (queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter (queryString) {
      return (restaurant) => {
        return (restaurant.value.indexOf(queryString.toLowerCase()) === 0)
      }
    },
    successPreview (file) {
      let abc = []
      console.log(file.data)
      abc = file.data
      for (var i = 0; i < abc.length; i++) {
        this.form.attach.push(abc[i])
      }
    },
    getStudentData () {
      // let httpUrl = 'http://119.23.36.128:8020/yxt-web/'
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'student/list/query', {grade: this.gradeSelect, clazz: this.classSelect + 1}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.total = response.data.data.total
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getAllData () {
      // let httpUrl = 'http://119.23.36.128:8020/yxt-web/'
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'student/list/query', {grade: this.gradeSelect, clazz: this.classSelect, rows: this.total}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.studentData = response.data.data.rows
          this.restaurants = this.studentData
          for (var i = 0; i < this.studentData.length; i++) {
            this.restaurants[i].value = this.studentData[i].name
          }
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    keyInput () {
      if (this.studentData.length !== 0) {
        for (var i = 0; i < this.studentData.length; i++) {
          if (this.form.name === this.studentData[i].name) {
            this.form.id = this.studentData[i].id
          }
        }
      }
    },
    getRankData () {
      // let httpUrl = 'http://119.23.36.128:8020/yxt-web/'
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'StudentFruits/awardGrade/query', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.RankOption = response.data.data
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getLevelData () {
      // let httpUrl = 'http://119.23.36.128:8020/yxt-web/'
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(httpUrl + 'StudentFruits/awardLevel/query', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.LevelOption = response.data.data
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    submitUpload () {
      this.$refs.upload.submit()
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
      console.log(file)
    },
    keepData (time) {
      // let httpUrl = 'http://119.23.36.128:8020/yxt-web/'
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.form.awardDate = this.$refs.date.displayValue
      let Msg = {studentId: this.form.id, studentName: this.form.name, gradeName: this.gradeSelect, clazz: this.classSelect, competitionName: this.form.competitionName, worksName: this.form.worksName, awardLevel: this.RankSelect, awardDate: this.form.awardDate, awardCompany: this.form.awardCompany, guideTeacher: this.form.guideTeacher, attach: this.form.attach}
      this.$http.post(this._httpUrl + 'StudentFruits/add', {Msg}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.$router.push('/achievements')
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getGradeData () {
      // let httpUrl = 'http://119.23.36.128:8020/yxt-web/'
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(httpUrl + 'grade/info', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.gradeOption = response.data.data.gradeMap
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getClassData () {
      // let httpUrl = 'http://119.23.36.128:8020/yxt-web/'
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(httpUrl + 'clazz/query?grade=' + this.gradeSelect, {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.classOption = response.data.data
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    }
  }
}
</script>

<style scoped>
  .el-date-editor--date{
    position: relative;
    left: 0;
    top: 0;
  }
  div[data-v-05da9316] ul
  {
    position: relative;
    left: 12%;
  }
  .el-upload--picture-card
  {
    margin-left: 16%; 
    margin-top: 40px;
    width: 80px; height: 80px;
  }
  .el-upload--picture-card i
  {
    position: relative; top: -28px;
  } 
</style>

<style lang="less" scoped>
	main{
		position: relative;
		.pink{
		  width: 104px;
		  height: 64px;
		  position: absolute;
		  left: 3%;
		  top: -20px;
		  background: #E12C6C;
		  border-radius: 4px;
		  text-align: center;
		  line-height: 70px;
		  color: #fff;
		  z-index: 2;
		}
		.model{
			width: 98%;
			background: #FFF;
			margin-left: 1%;
			margin-top: 60px;
			border-radius: 5px;
			padding-top: 10px;
			overflow: hidden;
		  .title{
		    margin-left: 12%;
		  }
		  .kong{
		  	padding: 20px;
		  }
		  .header{
		    border-bottom: 2px solid #D7D7D7;
		    padding: 30px 0 10px 0;
		    margin-left: 10%;
		    margin-right: 10px;
		    margin-bottom: 10px;
		    .title{
		      color: #FB7862;
		      border-bottom: 2px solid #FB7862;
		      padding: 0 0 10px 0;
		      margin-left: 0;
		    }
		  }
		  .body{
		  	width: 80%;
		  	margin-left: 10%;
		  	margin-right: 10px;
		  	padding: 30px 0 10px 0;
		  }
		  .bottom{
		    margin-top: 20px;
		    padding: 8px 0;
		    text-align: center;
		  }
		}
	}
  .textarea{
    resize: none;
    border-radius: 5px;
    border-color: #C0CCDA;
  }
  .textarea:hover{
    border-color: #8492A6;
  }
  .tooltip{
    margin-left: 100px;
    font-size: 12px;
  }
  .clear{
    clear: both;
  }
  .content{
    margin-left: 20%;
    margin-right: 20%;
    .line{
      padding: 20px;
      .left{
        float: left;
      }
      .right{
        float: right;
        margin-left: 5%;
      }
      .inputText{
        border: 0;
        border-bottom: 1px solid #d7d7d7;
      }
    }
  }
</style>
